<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>智能水肥</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">智能水肥</div>
				<!-- <el-button round size="mini" type="primary" @click="dialogVisible = true,formData = {}">新增设备</el-button> -->
				<el-button round size="mini" type="primary" @click="addEquipment">新增程序</el-button>
			</div>
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<tableForm :pageData="pageData" :data="data" :addNew="false">
				</tableForm>
				<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
			</div>
			
		</div>

		<el-dialog
		  title="新增设备"
		  :visible.sync="dialogVisible"
		  width="35%"
		  class="equip">
		  <formTemplate :formSet="formSet" :postData="formData" :rules='rules' :isDialog="true"  @flag="save" @close="close"></formTemplate>
		</el-dialog>
	</div>
</template>

<script>
import tableForm from '@/components/tableForm.vue'
import formTemplate from '@/components/form.vue'
	export default {
		components: {
			tableForm,
			formTemplate
		},
		data() {
			return {
				dialogVisible:false,
				formSet:[
					{ span: 24, label: '编号：', prop: 'number', type: 'input', disabled:false,width:'85%'},
                    { span: 24, label: '程序名称：', prop: 'programName', type: 'input' , disabled:false,width:'85%'},
                    { span: 24, label: '描述：', prop: 'describes', type: 'input', disabled:false ,width:'85%'},
				],
				rules: {
        		    number: { required: true, message: '不能为空', trigger: 'blur' },
        		    programName: { required: true, message: '不能为空', trigger: 'blur' },
        		    describes: { required: true, message: '不能为空', trigger: 'blur' },       
        		}, 
				formData:{},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				pageData: {
					items:[],
				},
                data:[
                    {type:'text',prop:'number',label:'编号'},
                    {type:'text',prop:'programName',label:'程序名称'},
                    {type:'text',prop:'describes',label:'描述'},
                ],
				page: 1,
				pageSize: $globalData.pageSize
			}
		},
		created() { 
			this.queryWaterFertilizerList()
		},
		mounted() {
		},
		watch: {


		},
		methods: {
			addEquipment(){
				let hrefData = this.$router.resolve({
    				name: "editEquipment",
				})
				window.open(hrefData.href, "_blank")
			},
			close(e){
				if(e == false){
					this.formData = {}
					this.dialogVisible = false
				}
			},
			save(flag){
				if(this.$store.state.company.companyId){
					if(flag != false){
						this.formData.companyId = this.companyId
						if(this.formData.isModify){
							delete this.formData.isModify
							this.$request.postForm(this.$api.updateVideoSurveillance, this.formData)
						    .then(res=>{
						    	if(res.code == 200){
						    		this.dialogVisible = false
						    		this.queryWaterFertilizerList()
						    	}
							})
						}else{
							this.$request.postForm(this.$api.saveWaterFertilizer, this.formData)
						    .then(res=>{
						    	if(res.code == 200){
						    		this.dialogVisible = false
						    		this.queryWaterFertilizerList()
						    	}
							})
						}
					}
				}else{
					this.$message.error('请先加入或创建团队！')
				}
			},
			queryWaterFertilizerList(){
				if(this.$store.state.company.companyId){
					this.$request.get(this.$api.queryWaterFertilizerList, {
					companyId: this.companyId,
					page:this.page,
					pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.pageData = res.data
						}
					})
				}
			},
			paginaClick(val) {
				this.page = val
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 10px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
